<template>
    <div class="container">
        <div class="search-content">
        
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight" 
                :header-cell-class-name="hdCellClassName" 
                :row-class-name="tableRowClassName"
                @row-click="onRowClick"
            >
                <el-table-column 
                  label="排序"
                  min-width="100"
                  align="center"
                  #default="{row}"
                >
                    <el-input 
                    v-model.number="row.sort" 
                    class="input-sort" 
                    align=center 
                    placeholder="排序"
                    @blur="handleSortBy(row)"
                    @change="handleChange(row)"
                  ></el-input>
                </el-table-column>
                <el-table-column 
                  label="顾问头像"
                  width="120"
                  align="center"
                  #default="{row}"
                >
                    <el-image class="group_avatar_full" :src="row.group_avatar_full" fit="cover" lazy>
                        <div slot="error" class="image-slot">
                           <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </el-table-column>
                <el-table-column 
                  prop="group_name" 
                  label="视频咨询名称"
                  min-width="160"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="team_name" 
                  label="视频咨询称号"
                  min-width="160"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  #default="{row}" 
                  label="手机号"
                  min-width="130"
                  align="center"
                >
                    <span v-html="row.consultant_data.join('<br>')"></span>
                </el-table-column>
                <el-table-column 
                  prop="create_time" 
                  label="创建时间"
                  min-width="160"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  label="声讯通知"
                  min-width="120"
                  align="center"
                  #default="{row}"
                >
                    <span :class="'state'+row.can_dial">{{row.can_dial_text}}</span>
                </el-table-column>
                <el-table-column 
                  prop="pc_name" 
                  label="操作"
                  width="140"
                  align="center"
                  fixed="right"
                  #default="{row}"
                >
                        <el-button type="text" @click="handleAdviser(row)">编辑</el-button>
                        <el-button type="text" @click="messageBox(row.group_id)">删除</el-button>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <div class="btn-group">
            </div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.curpage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
        <save-adviser ref="saveAdviser" :drawer="drawer" v-on:closeDrawer="closeDrawer" v-on:getData="getData"></save-adviser>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import {dateFormatter} from "@/common/js/util";
import saveAdviser from './adviser-save';
import {adviser} from './urlApi';
export default {
    props: ["showDrawer"],
    data() {
        return {
            currIndex: null,         // 当前操作的行索引
            stateList: [
                {label: '全部 ', value:''},
				{label: '未开通 ', value: 1},
				{label: '已开通', value: 2}
            ],
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 10,         // 每页显示数量
                total: 0              // 数据总数
            },
            dataList: [],             // 列表数据
            oHeight: 600,             // 默认高度, 其值会在mounted中的resize进行重新计算
            drawer: {                 // 子组件抽屉参数
                visible: false,
                row: null
            }
        }
    },
    computed: {
        getState() {
            return function(val) {
                return this.stateList.filter(item => item.value == val)[0].label;
            }
        }
    },
    components: {saveAdviser},
    methods: {
        hdCellClassName() {
            return 'hdCellStyle'
        },
        tableRowClassName({row, rowIndex}) {
            // 把每一行的索引放进row
            row.index = rowIndex;
        },
        onRowClick(row) {
            this.currIndex = row.index
        },
        _dateFormatter(row) {
            return dateFormatter("YYYY-MM-DD HH:mm:ss", row.pc_addtime*1000)
        },
        async handleSortBy(row) {
            if(!row.isChange) return;
            // 排序
            let datas = {group_id: parseInt(row.group_id), sort: row.sort};
            const res = await adviser.sortBy(datas)
            //console.log(res)
            if(res.code == 1) {
                // console.log("更新成功")
                this.getData();
            } else {
                this.$message.error(res.msg);
            }
        },
        handleChange(row) {
            row.isChange = true;
        },
        async getData() {
            let datas = {
                pageSize: this.pageArr.pageSize,
                page: this.pageArr.curpage
            }
            const res = await adviser.get(datas)
            if(res.code == 1) {
                this.dataList = this.fieldFilter(res.data.list, [
                    "group_id", "group_avatar", "group_avatar_full", "group_name", "team_name", "sort",
                    "can_dial", "consultant_data", "create_time", "can_dial_text"
                ]);
                this.pageArr.total = parseInt(res.data.totalCount)
            }
        },
        messageBox(group_id) {
            this.$confirm('确定删除该顾问信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                this.delRowData(group_id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })
            })
        },
        async delRowData(group_id = 0) {
            // 删除
            if(!group_id) return;
            const res = await adviser.del({group_id})
            if(res.code == 1) {
                this.$message({
                    type: "success",
                    message: "删除成功"
                })
                this.getData();
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
        fieldFilter(data, field) {
            if(!data) return [];
            return data.map((item, key) => {
                let obj = {};
                field.map(item2 => {
                    if(item[item2] != "undefined") {
                        obj[item2] = item[item2]
                    }
                })
                return obj;
            })
        },
        handleAdviser(row = {}) {
            // this.drawer.row = Object.assign({}, row); // 多层 无法实现深复制
            this.drawer.row =  row ? JSON.parse(JSON.stringify(row)) : row;
            this.drawer.visible = true;
        },
        closeDrawer() {
            this.drawer.row = null; // 这里不可为null, 否则 子组件无法监听 drawer.row
            this.drawer.visible = false;
            this.$emit("showDrawer")
        }
    },
    created() {
        this.$parent.showButton = true;
        this.getData()
    },
	mounted() {
		resize(this)
	},
	watch: {
        "showDrawer": {
            immediate: true,
            handler: function(val, oldVal){
                if(val) this.handleAdviser();
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    /deep/.search {
        &-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-label {
                font-size: 14px;
            }
            &-input {
                width: 200px;
            }
            .el-form-item {
                margin-bottom: 10px;
            }
        }
    }
    /deep/.search-list {
        .input-sort input {
            width: 60px;
            text-align: center;
        }
    }
    /deep/.bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-bottom {
            background: #409EFF;
            color: #fff;
            border: 0;
            font-size: 14px;
            padding: 5px 8px;
            border-radius: 3px;
            display: inline-block;
        }
    }
    /deep/.group_avatar_full {
        width: 50px;
        height: 50px;
        background: #f8f8f8;
        display: flex;
        margin: 0 auto;
        align-items: center;
        justify-content: space-around;
    }
    /deep/.state1{
        color: #67C23A;
    }
    /deep/.state2{
        color: #999;
    }
}
</style>
